import React, { forwardRef, useState, useEffect } from 'react'
import './style/Newinfo3.scss'
// import style from './Animalmanagement.module.css'
import * as echarts from "echarts";
const Newinfo3 = forwardRef((props, ref) => {
    const [infodata, setdata] = useState([])
    const getdata = () => {
        // setdata(ref)

    }

    const drawbar = () => {

        const pieData = [
            { key: 2, name: '暴雨洪水', value: 30619 },
            { key: 2, name: '台风', value: 5921 },
            { key: 2, name: '龙卷风', value: 1153 },
            { key: 2, name: '雪灾', value: 266 },
            { key: 2, name: '高温热浪', value: 87 }
          ];
          const title = '预测成功率70%%'
          const colors = ['#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d']
        var myChart = echarts.init(document.getElementById("Newinfo3_barli"));
        var option = {
            // backgroundColor: '#001552',
            title: {
               text: title, // 图标内容文本
               left: 'center', // 图标内容水平居中
               top: 'center', // 图标内容垂直居中
               // 文本样式
               textStyle: {
                  color: '#fff', // 图标内容文字颜色
                  fontSize: '18px', // 图标内容文字大小
                  fontWeight: 'normal'
               }
            },
            // 图表图例
            legend: {
               show: false,
               orient: 'vertical', // 图例排列方向
               icon: 'circle', // 图例样式为圆形
               itemWidth: 10, // 图例图形的宽度
               itemHeight: 16, // 图例图形的高度
               itemGap: 10, // 图例项之间的间隔
               right: '6%', // 图例距离容器右侧的距离
               top: 'center', // 图例垂直居中
               textStyle: {
                  color: '#00ddff' // 图例文字颜色
               },
            },
            color: colors,
            series: [
               {
                  type: 'pie', // 图表类型为饼图
                  radius: ['38%', '56%'], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
                  avoidLabelOverlap: true, // 是否启用防止标签重叠策略
                  showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
                  label: {
                     show: true,
                     formatter: '{b}\n{d}%',
                     color: '#b3c9d5'
                  },
                  data: pieData
               },
               {
                  name: '内边框',
                  type: 'pie',
                  tooltip: {
                     show: false
                  },
                  center: ['50%', '50%'],
                  radius: ['16%', '16%'],
                  label: {
                     show: false // 不展示data中的value和name
                  },
                  data: [
                     {
                        value: 1, // 此处的值无所谓是多少
                        name: '', // 因为不展示label，可不填
                        itemStyle: {
                           // 边框样式，浅蓝色，颜色可自行修改
                           borderWidth: 2, // 边框宽度
                           borderColor: '#b3c9d5' // 边框颜色
                        }
                     }
                  ]
               }
            ]
         };

        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }
    const drawbar2 = () => {


        var myChart = echarts.init(document.getElementById("Newinfo3_barli2"));
        var option = {
            // backgroundColor: '#0D2753',
            tooltip: {
                //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
                confine: true,
                enterable: true, //鼠标是否可以移动到tooltip区域内
            },
            title: {
                text: '未来气象危害可能占比',
                textStyle: {
                  color: "#ccc",
                  fontSize: 25
                },
                top: "0%",
                left: 'center',
                // 		right: '5%'
              },
            radar: {
                name: {
                    textStyle: {
                        color: '#05D5FF',
                        fontSize: 14,
                    },
                },
                shape: 'polygon',
                center: ['50%', '50%'],
                radius: '80%',
                startAngle: 120,
                scale: true,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(5, 213, 255, .8)',
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        color: 'rgba(5, 213, 255, .8)', // 设置网格的颜色
                    },
                },
                indicator: [
                    {
                        name: '暴雨洪水',
                        max: 100,
                    },
                    {
                        name: '台风',
                        max: 100,
                    },
                    {
                        name: '龙卷风',
                        max: 100,
                    },
                    {
                        name: '雪灾',
                        max: 100,
                    },
                    {
                        name: '高温热浪',
                        max: 100,
                    },
                    {
                        name: '冰雹',
                        max: 100,
                    },
                ],
                splitArea: {
                    show: false,
                },
            },
            grid: {
                position: 'center',
            },
            polar: {
                center: ['50%', '50%'], // 默认全局居中
                radius: '0%',

            },
            angleAxis: {
                min: 0,
                interval: 5,
                clockwise: false,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
            },
            radiusAxis: {
                min: 0,
                interval: 20,
                splitLine: {
                    show: false,
                },
            },
            series: [
                {
                    name: '灾害列表',
                    type: 'radar',
                    symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
                    symbolSize: 10, // 拐点的大小
                    itemStyle: {
                        normal: {
                            color: '#05D5FF',
                        },
                    },
                    areaStyle: {
                        normal: {
                            color: '#05D5FF',
                            opacity: 0.5,
                        },
                    },
                    lineStyle: {
                        width: 2,
                        color: '#05D5FF',
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: (params) => {
                                return params.value;
                            },
                            color: '#fff',
                        },
                    },
                    data: [
                        {
                            value: [20, 50, 60, 60, 90, 80],
                        },
                    ],
                },
            ],
        };


        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }

    useEffect(() => {
        drawbar()
        drawbar2()
        console.log(infodata);
        getdata()

    }, [])
    // console.log(ref);
    return (
        <div className='Newinfo3_showli'>
            {/* {drawlist()} */}
            <div id='Newinfo3_barli'></div>
            <div id='Newinfo3_barli2'></div>
        </div>
    )
})

export default Newinfo3